<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2019/1/6
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../common/tag.jsp"/>
<html>
<head>
    <title>会员信息管理</title>
</head>
    <script>
        $(function () {
           $("#hytable").bootstrapTable({
               url : '${pageContext.request.contextPath}/member/query',
               height : 510,  //表格高度
               pagination : true, //开启分页
               pageSize : 7, //每页显示的行数
               pageList:[2,4,8,16], //设置可供选择的页面数据条数
               pageNumber:1, //如果设置了分页，首页页码。
               sidePagination:'server',  //启用服务器端分页
               queryParams:function(params){
                   var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                       limit: params.limit,  //页面大小
                       offset: params.offset, //页码
                       name:$("#name").val(),
                       phone:$("#phone").val()
                   };
                   return temp;
               },
               columns : [
                   {field:'id',title:'会员编号',align:'center'},
                   {field:'name',title:'会员姓名',align:'center'},
                   {field:'sex',title:'性别',align:'center'},
                   {field:'membertype.type',title:'会员类型',align:'center'},
                   {field:'membertype.zhekou',title:'折扣',align:'center'},
                   {field:'integral',title:'积分',align:'center'},
                   {field:'xiaoMoney',title:'累计消费',align:'center'},
                   {field:'phone',title:'电话',align:'center'},
                   {field:'riqi',title:'加入日期',align:'center'}
               ]
           })
        });
    </script>
<body style="margin:20px 10px;overflow-y: hidden">
    <div>
        <form class="form-inline" style="margin-top: 20px;text-align: right">
            <div class="form-group">
                <label for="name" style="font-size: 15px;">姓名：</label>&nbsp;
                <input type="text" class="form-control" id="name" placeholder="张三" style="height: 40px;">
            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label for="phone">手机号：</label>&nbsp;
                <input type="text" class="form-control" id="phone" placeholder="15231825654" style="height: 40px;">
            </div>
            <button onclick="serch();" class="btn btn-primary btn-lg" type="button"><span class="glyphicon glyphicon-search">搜索</span></button>
        </form>
        <table id="hytable"></table>
    </div>
</body>
<script>
    /*点击搜索*/
    function serch() {
        //返回表格的 Options。
        var opts = $("#hytable").bootstrapTable("getOptions") ;
        var limit = opts.pageSize ;
        var offset = (opts.pageNumber-1) * limit;
        var phone = $("#phone").val();
        var name = $("#name").val();
        //alert(fid);
        $.post("${pageContext.request.contextPath}/member/query",{'phone':phone,'name':name,'limit':limit,'offset':offset},function (data) {
            // var mydata = eval("("+data+")") ;
            //$("#zongjine").val(data.zq);
            //重新绑定表格数据
            $("#hytable").bootstrapTable('load',data) ;
        })
    }
</script>
</html>
